import { AEditorBase } from '../core/editor-base';
import { Config } from '../core/config';
import  'reflect-metadata';
import { EditorManage } from '../core/editor-manage';
import { ICellBase } from '../interfaces/cell';
@Reflect.metadata('TextEditor', 'a')
export class TextEditor extends AEditorBase {
    public editorContainer: HTMLElement;
    public editorName: string = 'TextEditor';
    protected inited: boolean = false;
    protected input: HTMLInputElement;
    protected curentCell: ICellBase;
    protected position: [number, number, number, number];
    
    constructor(protected conf: Config, protected manage: EditorManage) {
        super();
    }
    public init() {
        if(this.inited == true) return;
        this.inited = true;
        let input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('class', 'z-excel-editor-input')
        this.input = input;
        this.manage.editorContainer.append(this.input);
        this.bindEvent();
    }
    public open(cell: ICellBase) {
        this.curentCell = cell;
        this.init();
        this.input.value = '';
        let position = this.conf.getPosition({row: cell.row, col: cell.col}, {row: cell.row + cell.merge.rowspan, col: cell.col + cell.merge.colspan});
        this.position = position;
        this.input.setAttribute('style', `left: ${position[0]}px;top: ${position[1]}px;display: inline-block;height:${position[3]-position[1]}px;width: ${position[2]-position[0]}px;`);
        this.input.focus();
    }
    public setValue() {

    }
    public close() {
        this.input.setAttribute('style', 'display: none;')
    }
    public getValue() {

    }
    public focus() {
        
    }
    protected bindEvent() {
        let ctx = (document.createElement('canvas') as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D;
        this.input.addEventListener('blur', () => {
            this.close();
        });
        this.input.oninput = () => {
            let val = this.input.value;
            ctx.font="12px 宋体"; 
            let fontWidth = ctx.measureText(val).width;
            if(fontWidth < this.position[2] - this.position[0] - 1) {
                this.input.setAttribute('style', `
                left: ${this.position[0]}px;
                top: ${this.position[1]}px;
                display: inline-block;
                height:${this.position[3]-this.position[1]}px;
                width: ${this.position[2]-this.position[0]}px;
                `);
            }else{
                this.input.setAttribute('style', `
                left: ${this.position[0]}px;
                top: ${this.position[1]}px;
                display: inline-block;
                height:${this.position[3]-this.position[1]}px;
                width: ${fontWidth + 6}px;
                `);
            }
        }
        this.input.addEventListener('keyup', (ev: KeyboardEvent) => {
            if(ev.keyCode == 13) {
                this.close();
            } 
        })
        // this.input.addEventListener('oninput', (ev: any) => {
        //     let val = this.input.value;
        //     ctx.font="12px 宋体"; 
        //     let fontWidth = ctx.measureText(val).width;
        //     if(fontWidth < this.position[2] - this.position[0] - 1) {
        //         this.input.setAttribute('style', `
        //         left: ${this.position[0]}px;
        //         top: ${this.position[1]}px;
        //         display: inline-block;
        //         height:${this.position[3]-this.position[1]}px;
        //         width: ${this.position[2]-this.position[0]}px;
        //         `);
        //     }else{
        //         this.input.setAttribute('style', `
        //         left: ${this.position[0]}px;
        //         top: ${this.position[1]}px;
        //         display: inline-block;
        //         height:${this.position[3]-this.position[1]}px;
        //         width: ${fontWidth + 6}px;
        //         `);
        //     }
        //     // if(ev.keyCode == 13) {
        //     //     this.close();
        //     // } 
        // });
    }
}
